<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Prijava na dogadaj</title>
	<script type="text/javascript" src="http://localhost:8080/consumer-synchronizer/dojo/dojo.js.uncompressed.js"></script>
	
	<script type="text/javascript" src="http://localhost:8080/consumer-synchronizer/event/event.js"></script>
	<script type="text/javascript" src="http://localhost:8080/consumer-synchronizer/event/connection.js"></script>
	<script type="text/javascript">
	dojo.ready( function(){
		EC.init({
			key: 			'/event~zavrsni-rad',
			hostUrl:		'http://localhost:8080/consumer-synchronizer/',
			register:		'#register',
			unregister:		'#unregister',
			registrationStatus: '#registrationStatus',
			status:			'#message',
			eventTime:		'#eventTime',
			usersMissing:	'#usersMissing',
			placesAvailable:'#placesAvailable',
			alertTime:		'#alertTime',
			btnAddAlert:	'#setAlert',
			alertStatus:	'#alertStatus'
		});
		
		initializeBayeuxConnection('http://localhost:8080/consumer-synchronizer/cometd');
		EC.doSubscribe();
		EC.getInfo();		
	});
	</script>

</head>
<body style="font-family: Arial, sans-serif;">
	<div style="width: 350px; height: 450px; border: 1px solid;">
		<div style="padding: 20px;">
			<h3 style="margin-top:0;">Događaj</h3>
			<p>
				<strong id="eventTime"></strong>
			</p>
			<p>
				Nedostaje učesnika <strong id="usersMissing"></strong>
				<br />
				Preostalo mjesta <strong id="placesAvailable"></strong>
			</p>
			<div style="text-align: right;">
				<input type="button" value="Prijavi me" id="register" />
				<input type="button" value="Odjavi me" id="unregister" />
				<div id="registrationStatus" style="text-align: right; font-size: 0.9em; margin: 12px 0 0;"></div>
			</div>
		</div>
		<div style="padding: 20px; border-top: 1px solid #333;">
			<select name="alertTime" id="alertTime">
				<option value="10">10 sekundi</option>
				<option value="30">30 sekundi</option>
				<option value="60">1 minuta</option>
				<option value="300">5 minuta</option>
			</select>
			<input type="button" value="Obavijesti me!" id="setAlert" />
			<div id="alertStatus"></div>
		</div>
		<div style="padding: 20px; text-align: left; border-top: 1px solid #333;">
			<div id="message"></div>
		</div>
	</div>
</body>
</html>